<template>
  <div id="index" :class="data.ready ? 'go' : ''">
    <h1 class="user-name">
      <div class="avatar">
        Bit
      </div>
      <span class="com-name">
      SMALL STAR
      </span>
    </h1>
    <ul class="sections-nav" :class="data.itemName">
      <span class="selection cursor-only"></span>
      <li class="about" @click="goAbout" @mouseenter="addClass('about')">
        <div class="name">
          <span>Abou</span>
          <div class="bar">
            <i class="one"></i>
            <i class="two"></i>
            <i class="three"></i>
          </div>
        </div>
        <div class="desc">
          关于SmallStar
        </div>
      </li>
      <li class="blog" @click="goBlogList" @mouseenter="addClass('blog')">
        <span>Blog</span>
        <div class="desc">
          查看Bolg
        </div>
      </li>
      <li class="items" @click="goItems" @mouseenter="addClass('items')">
        <span>Items</span>
        <div class="desc">
          了解项目
        </div>
      </li>
      <div class="footer" @click="goLogin">
        Login
      </div>
    </ul>
    <div class="spinner" :class="data.itemName">
      <div class="rings" @click="goNext">
        <div class="group-1 zero">
          <div class="ring"></div>
          <div class="ring ring2"></div>
          <div class="ring ring3"></div>
          <div class="ring ring4"></div>
          <div class="content" :class="data.itemName">
            <div class="about-content">
              <img src="../../assets/images/user/header.jpg" alt="">
              <span class="btn">查看全部</span>
            </div>
            <div class="blog-content">
              <img src="../../assets/images/index/blog.jpg" alt="">
              <span class="btn">查看全部</span>
            </div>
            <div class="items-content">
              <img src="../../assets/images/index/github.jpg" alt="">
              <span class="btn">查看全部</span>
            </div>
          </div>
        </div>
        <div class="group-2 one">
          <div class="ring ring-one"></div>
        </div>
      </div>
      <div class="about-proview" @click="addClass('about')">
        <div class="mini-preview">
          <span class="symbol">
            <span class="text">About</span>
          </span>
        </div>
        <div class="full-preview about-circles">
          <span class="run circle backdrop"></span>
          <span class="second circle backdrop"></span>
          <span class="third circle backdrop"></span>
          <span class="run full circle">
            <span class="the-circle"></span>
            <div class="circle-contents">
              <strong>0</strong>
              <small>Update</small>
            </div>
          </span>
          <span class="second full circle">
            <span class="the-circle"></span>
            <div class="circle-contents">
              <strong class="">0</strong>
              <small>Stars</small>
            </div>
          </span>
          <span class="third full circle">
            <span class="the-circle"></span>
            <div class="circle-contents">
              <strong class="big-number">2</strong>
              <small>Years</small>
            </div>
          </span>
        </div>
      </div>

      <div class="blog-proview" @click="addClass('blog')">
        <div class="mini-preview">
          <span class="symbol">
            <span class="text">Blog</span>
          </span>
        </div>
        <div class="full-preview" :class="data.itemName">
          <span class="big-circle backdrop"></span>
          <span class="big-circle actual"></span>
          <div class="blog-contents">
            <strong>0</strong>
            <small>博文</small>
          </div>
        </div>
      </div>

      <div class="items-proview" @click="addClass('items')">
        <div class="mini-preview">
          <span class="symbol">
            <span class="text">Items</span>
          </span>
        </div>
        <div class="full-preview" :class="data.itemName">
          <span class="big-circle backdrop"></span>
          <span class="big-circle actual"></span>
          <div class="items-contents">
            <strong>0</strong>
            <small>项目</small>
          </div>
        </div>
      </div>
    </div>

    <a class="tips" target="_blank" href="http://www.beian.miit.gov.cn">蜀ICP备19011588号-1</a>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="less">
  @import './index.less';
</style>

